import QtQuick 1.0

MouseArea {
    id: _root
    width: 50//_label.width * 1.2
    height: _label.font.pixelSize * 1.2

    property alias text: _label.text
    property alias font: _label.font

    signal pressKey(int key)

    Rectangle {
        id: _background
        anchors.fill: parent
        color: "#666666"
        radius: 5
        smooth: true
    }

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { id: _grad1; position: 0.00; color: "#FFFFFF" }
            GradientStop { id: _grad2; position: 0.33; color: "#333333" }
            GradientStop { id: _grad3; position: 1.00; color: "#FFFFFF" }
        }
        radius: _background.radius
        opacity: 0.33
        smooth: true
    }

    Text {
        id: _label
        anchors.fill: parent
        text: "ボタン"
        color: "white"
        font.bold: true
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
//        Component.onCompleted: font.pixelSize  font.pixelSize * 1.5
    }

    //キーイベント
    Keys.onPressed: {
        pressKey(event.key);
    }

    states: [
        State {
            name: "pressed"
            when: _root.pressed
            PropertyChanges { target: _grad2; position: 0.75 }
            PropertyChanges { target: _label; anchors.leftMargin: 3 }
            PropertyChanges { target: _label; anchors.topMargin: 3 }
        },
        State {
            name: "forcus"
            when: _root.focus
            PropertyChanges { target: _grad1; color: "#ff9900" }
            PropertyChanges { target: _grad3; color: "#ff9900" }
        }
    ]
}
